<template>
	<view class="">
		<view class="container">
			<view class="main">
				<view class="title u-flex u-col-center u-row-between">
					<view class="tl">
						联系信息
					</view>
					<view class="tr u-flex u-col-center u-row-right"
						@click="$pageTo('/pages/user/addressList?types=release')">
						<text>切换/选择</text>
						<image src="../../static/qh.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="list" v-if="personInfo.gameZoneName">
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							大区名称
						</view>
						<view class="r">
							{{personInfo.gameZoneName}}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							游戏ID
						</view>
						<view class="r">
							{{personInfo.account}}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							微信号
						</view>
						<view class="r">
							{{personInfo.wechat}}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							手机号
						</view>
						<view class="r">
							{{personInfo.phone}}
						</view>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="title u-flex u-col-center u-row-between">
					<view class="tl">
						道具信息
					</view>
				</view>
				<view class="list">
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							类型
						</view>
						<view class="r">
							{{dataInfo.type==1?'我要收购':'我要出售'}}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							商品名称
						</view>
						<view class="r">
							{{dataInfo.name}}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							价格模式
						</view>
						<view class="r">
							{{dataInfo.priceMode==1?'买家出价':'卖家定价'}}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							价格<text>{{dataInfo.priceUnit == 0?'(MHB)':'(元)'}}</text>
						</view>
						<view class="r" v-if="dataInfo.price">
							<view class="pa" v-if="dataInfo.price">
								<text class="p" :class="{'p1':getPriceLength(dataInfo.price)<6,'p2':
									getPriceLength(dataInfo.price)==6,'p3'
									:getPriceLength(dataInfo.price)==7,'p4'
									:getPriceLength(dataInfo.price)==8,'p5'
									:getPriceLength(dataInfo.price)>=9,}">{{$numToLocaleString(dataInfo.price)}}</text>
							</view>
							<view class="pb">
								{{ dataInfo.price | numberToChinese(dataInfo.priceUnit) }}
							</view>
						</view>
						<view class="r" v-else>
							-
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							图片
						</view>
						<view class="r" @click="$previewImage([dataInfo.image],0)">
							<image  :src="dataInfo.image" mode="aspectFill"></image>
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							上架天数
						</view>
						<view class="r">
							{{dataInfo.upday}}
						</view>
					</view>
				</view>
			</view>
			<view class="f-price u-flex u-col-center u-row-between" v-if="false">
				<view class="l">
					所需商人币
				</view>
				<view class="r">
					{{dataInfo.upday * coin}}
				</view>
			</view>
			<view class="tips">
				<view class="" v-html="content"></view>
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="footer-con">
			<view class="rem u-flex u-col-center" @click="rem=!rem">
				<image src="../../static/c6.png" mode="aspectFill" v-if="rem"></image>
				<image src="../../static/c1.png" mode="aspectFill" v-else></image>
				<text class="t1">我已阅读并同意</text>
				<text class="t2" @click.stop="$pageTo(`/pages/user/article?type=quotationrule`)">发布规则</text>
			</view>
		<!-- 	<view class="f-btn" @click="pay">
				立即支付 {{dataInfo.upday* coin}} 商人币
			</view> -->
			<view class="f-btn" @click="pay">
				立即发布
			</view>
		</view>
	</view>
</template>

<script>
	import {
		webconfig,
		accountList,
		getUserinfo,
		quotationAdd
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				rem: true,
				content: ``,
				dataInfo: {},
				personInfo: {},
				coin:0
			}
		},
		onLoad() {

		},
		onShow() {
			let data = uni.getStorageSync('releaseData');
			this.dataInfo = data
			if (uni.getStorageSync('addressData')) {
				let addressData = uni.getStorageSync('addressData');
				this.personInfo = addressData
			} else {
				this.getlist()
			}
			this.getwebconfig()
		},
		computed: {
			getPriceLength() {
				return (data) => {
					if (!data) return 1
					function getDigitCount(num) {
						if (num === 0) return 1;

						num = Math.abs(parseInt(num)); // 忽略小数部分，只处理整数
						return Math.floor(Math.log10(num)) + 1;
					}
					let l = getDigitCount(data)
					return l

				}
			}
		},
		methods: {
			getwebconfig() {
				webconfig({}).then(res => {
					if (res.code == 200) {
						this.content = res.data.quotationrule
						this.coin = res.data.coin
					}
				})
			},
			getlist() {
				accountList({
					page: 1
				}).then(res => {
					if (res.code == 200) {
						let list = res.data.list
						let index = list.findIndex(item => item.isDefault == 1)
						if (index > -1) {
							let addressData = list[index]
							this.personInfo = addressData
						}
					}
				})
			},
			pay() {
				if (!this.personInfo.gameZoneName) {
					this.$modal.msg('请选择游戏区服')
					return
				}
				if (!this.rem) {
					this.$modal.msg('请阅读并同意规则')
					return
				}
				this.$throttling(()=>{
					quotationAdd({
						type: this.dataInfo.type,
						priceMode: this.dataInfo.priceMode,
						name: this.dataInfo.name,
						price: this.dataInfo.price,
						image: this.dataInfo.image,
						upday: this.dataInfo.upday,
						coin: this.dataInfo.upday,
						priceUnit: this.dataInfo.priceUnit,
						game_zone_name: this.personInfo.gameZoneName,
						account: this.personInfo.account,
						wechat: this.personInfo.wechat,
						phone: this.personInfo.phone,
						paytype: 2,
					}).then(res => {
						if (res.code == 200) {
							uni.removeStorageSync('releaseData');
							uni.removeStorageSync('addressData');
							uni.redirectTo({
								url: '/pages/user/success'
							})
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$color: #FF6F07;

	.footer-con {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9;
		box-sizing: border-box;
		min-height: 200rpx;
		.f-btn {
			line-height: 100rpx;
			font-size: 32rpx;
			color: #fff;
			height: 100rpx;
			background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);
			border-radius: 20rpx;
			text-align: center;
			width: 100%;
			margin-top: 20rpx;
		}

		.rem {
			image {
				width: 28rpx;
				height: 28rpx;
				display: inline-block;
			}

			text {
				font-size: 20rpx;
				color: #D1D1D6;
				margin-left: 10rpx;
			}

			.t2 {
				color: $color;
			}
		}
	}

	.container {
		padding: 20rpx 30rpx 0rpx;

		.tips {
			padding-top: 20rpx;
			font-size: 26rpx;
			color: #AEAEAE;
			line-height: 40rpx;

		}

		.m-pop2 {
			width: 620rpx;
			height: 400rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			flex-direction: column;
			box-sizing: border-box;
			padding: 60rpx 40rpx 20rpx;
			background: #fff;
			border-radius: 20rpx;

			.t {
				line-height: 44rpx;
				height: 44rpx;
				font-size: 40rpx;
				color: #000000;
				text-align: center;
				font-weight: 600;
			}

			.p {
				margin-top: 60rpx;
				line-height: 44rpx;
				height: 44rpx;
				font-size: 32rpx;
				color: #000000;
				text-align: center;

				text {
					color: $color;
				}
			}

			.btns {
				width: 100%;
				margin-top: 50rpx;

				.btn {
					text-align: center;
					font-size: 32rpx;
					width: calc(50% - 10rpx);
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 20rpx;
				}

				.btn1 {

					background: #F9F9F9;
					color: #D1CDCD;
				}

				.btn2 {
					color: #fff;
					background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);

				}
			}
		}



		.f-price {
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.l {
				color: #11192D;
				font-size: 32rpx;
			}

			.r {
				color: #11192D;
				font-size: 28rpx;
			}
		}

		.main {
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.list {
				margin-top: 20rpx;

				.item {
					padding: 10rpx 0;

					.l {
						height: 40rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						color: #979797;
						text {
							font-size: 20rpx;
							margin-left: 10rpx;
						}
					}

					.r {
						flex: 1;
						width: 1rpx;
						text-align: right;
						line-height: 40rpx;
						color: #11192D;
						font-size: 28rpx;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 12rpx;
							overflow: hidden;
						}

						.pa {
							text-align: right;

							.p {
								font-family: "DIN";
								font-weight: bold;
								font-size: 36rpx;
								text-align: right;

							}

							.p5 {
								color: #FF70A4;
							}

							.p4 {
								color: #840FFB;
							}

							.p3 {
								color: #FE1515;
							}

							.p2 {
								color: #1EC742;
							}

							.p1 {
								color: #11192D;
							}
						}

						.pb {
							line-height: 30rpx;
							height: 30rpx;
							font-size: 20rpx;
							color: #979797;

						}
					}
				}
			}

			.title {
				height: 40rpx;
				line-height: 40rpx;

				.tl {
					font-size: 32rpx;
					color: #11192D;
				}

				.tr {
					text {
						font-size: 28rpx;
						color: $color;
					}

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}

			}
		}
	}
</style>